<template>
	<view class="feedback">
		<view class="box">
			<view class="edit">
				<textarea maxlength="255" v-model="content" placeholder="请详细描述您遇到的问题" />
			</view>
			<view class="remarks">
				<text>*</text>
				<text>感谢您的反馈，我们会在第一时间处理您遇到的问题</text>
			</view>
			<view class="btn">
				<button type="default" :disabled="isDisplay" @click="submit()">提交</button>
			</view>
			<view class="tabs-lists">
				<view class="tabs-list">
					<view class="tab-list" :class="{'active':active===1}" @click="handleSelect(1)">
						我的反馈
					</view>
					<view class="tab-list" :class="{'active':active===2}" @click="handleSelect(2)">
						全网反馈
					</view>
				</view>
				<view class="title">
					<text>有奖全网反馈</text>
					<text class="iconfont icon-wenti"></text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height: screenHeight+'upx'}" @scrolltolower="getData()">
			<view class="lists" v-for="(item,index) of data" :key="index">
				<view class="list">
					<view class="list-left">
						<image :src=" item.avatar" mode=""></image>
						<view class="list-c">
							<text class="name">{{item.username}}</text>
							<text>2020-12-23</text>
						</view>
					</view>
					<view class="list-right" v-if="item.adopt">
						<text>已采纳</text>
					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
			</view>
			
			<block-loading :status="status" :len="data.length"></block-loading>
		</scroll-view>
	</view>
</template>

<script>
	import {getFeedback,postFeedback} from "@/api/feedback.js";
	import {mapState} from "vuex";
	export default{
		name:"feedback",
		data(){
			return{
				active:1,
				screenHeight:0,
				data:[],
				status:"loading",
				page:1,
				content:"",
				isDisplay:true
			}
		},
		computed:{
			...mapState(['isLogin','userInfo']),
		},
		mounted() {
			let that = this
			const res = uni.getSystemInfoSync();
			that.$nextTick(()=>{
				const query = uni.createSelectorQuery().in(that);
				query.select('.box').boundingClientRect(data => {
					let winrate = 750/res.windowWidth;
					that.screenHeight = (res.windowHeight*winrate-data.height*winrate-30);
				}).exec();
			})
			this.getData()
		},
		methods:{
			handleSelect(val){
				this.active = val;
				this.page = 1;
				this.data = [];
				this.getData();
			},
			async getData(){
				let res = await getFeedback({page:this.page,size:20,type:this.active});
				if(this.page===1&&res.data.length === 0){
					this.status = "nodata"
					return
				}
				if(this.page===1&&res.data.length > 0 && res.data.length < 20){
					this.status = "nomore"
				}
				if(res.data.length === 0){
					this.status = "nomore"
					return;
				}
				this.page++;
				this.data = this.data.concat(res.data);
			},
			async submit(){
				if(!this.isLogin){
					uni.navigateTo({
						url:"/pages/entrance/login/login"
					})
					return;
				}
				if(!this.content){
					this.$msg("请输入要反馈的内容");
					return
				}
				this.isDisplay = true;
				let res = await postFeedback({content:this.content});
				if(res.code === 1){
					this.content = "";
					this.page = 1;
					this.data = [];
					this.getData();
				}else{
					this.isDisplay = false;
				}
				this.$msg(res.msg)
			}
		},
		watch:{
			content(newValue){
				this.isDisplay = !newValue
			}
		}
	}
</script>

<style scoped lang="less" src="./feedback.less">
</style>
